<template>
  <div>
    <!--顶部区-->
    <HeaderLayout />
    <!--内容区-->
    <el-container class="Layout">
      <!--左侧栏：历史对话框组件-->
      <el-aside class="Aside">
        <AsideLayout />
      </el-aside>
      <!--内容区：主要内容区域-->
      <el-main class="Main">
        <router-view></router-view>
      </el-main>
      <!--      &lt;!&ndash;右侧栏：&ndash;&gt;-->
      <!--      <el-aside class="Aside" width="200px">-->
      <!--        <div class="content">-->
      <!--          right aside-->
      <!--        </div>-->
      <!--      </el-aside>-->
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from "@iconify/vue";
import AsideLayout from "@/Layout/AsideLayout.vue";
import HeaderLayout from "@/Layout/HeaderLayout.vue";
</script>

<style lang="scss" scoped>
// @import "element/variables.scss";

.Layout {
  height: calc(100vh - $TOP-HEIGHT);
  background-color: $BG-COLOR;
  .Main {
    @apply flex flex-col justify-between p-0 my-5 mr-5;
  }
  .Aside {
    @include UN-PADDING;
  }
}
</style>
